<template>
  <div class="evaluation">
    <basic-container>
      <avue-crud
        :option="option"
        :data="data"
        :page.sync="page"
        @on-load="onLoad"
        :search.sync="query"
        @refresh-change="onLoad"
        @row-save="rowSave"
        @search-change="searchChange"
        @row-update="rowUpdate"
        @row-del="rowDel"
      >
        <template slot="menuLeft" slot-scope="{ size }">
          <!-- <el-button type="primary" :size="size" @click="goToResultSet()">结果设置</el-button> -->
          <!-- <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            plain
            @click="handleDelete"
          >删除量表</el-button>-->
        </template>

        <template slot-scope="{ type, size, row }" slot="menu">
          <!-- <el-button icon="el-icon-check" :size="size" :type="type" @click="goToDetailsList()">题目详情</el-button> -->

          <el-switch
            :value="row.status === 1"
            @input="(val) => switchStatus(row, val)"
            size="small"
            active-text="上架"
            inactive-text="下架"
          ></el-switch>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {
  getCategoryList,
  saveCategory,
  updateCategory,
  deleteCategory,
} from "@/api/scale";

export default {
  name: "Evaluation",
  data() {
    return {
      user: {},
      search: {},
      promote: true,
      page: {
        pageSize: 20,
      },
      option: {
        addBtnText: "添加类别",
        delBtnText: "删除",
        excelBtn: false,
        delBtn: true,
        border: true,
        index: false,
        expandLevel: 3,
        headerAlign: "left",
        align: "left",
        tree: false,
        labelWidth: 100,
        menuWidth: 480,
        column: [
          {
            width: 130,
            label: "编码",
            prop: "gaugeTypeCode",
            rules: [
              {
                required: true,
                message: "请输入编码",
                trigger: "blur",
              },
            ],
          },
          {
            label: "类别名称",
            prop: "typeName",
            // type: "icon",
            formslot: true,
            // searchslot: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入类别名称",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
      query: {},
    };
  },
  methods: {
    async onLoad(page = this.page, params = {}) {
      //模拟分页
      // this.page.total = 40;
      const {
        data: { data },
      } = await getCategoryList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      );
      this.data = data.records;

      this.page.total = data.total;
    },
    goToDetailsList() {
      this.$router.push({ name: "试题详情列表" });
    },
    goToResultSet() {
      this.$router.push({ name: "结果列表" });
    },
    async rowSave(form, done, loading) {
      await saveCategory(form);

      loading();

      this.onLoad();

      done(form);
    },
    async searchChange(params, done) {
      await this.onLoad(this.page, params);
      done();
    },
    async rowUpdate(form, index, done, loading) {
      await updateCategory(form);

      loading();

      done(form);
    },
    async rowDel(form) {
      await deleteCategory({ ids: form.gaugeTypeId });
      this.onLoad(this.page);
    },
    async switchStatus(row, bool) {
      row.status = bool ? 1 : 0;
      await updateCategory(row);
      this.onLoad(this.page);
    },
  },
};
</script>

<style lang="scss" scoped>
.evaluation {
}
</style>
